<template>
  <div>
    <div class="form-wrap">
      <picker
        v-model="addressList"
        class="input-block-plain"
        mode="region"
        @change="handleAddressChange"
      >
        <span
          class="placeholder"
          :class="{hasVal:!!addressList.length}"
        >{{addressSelect}}</span>
        <img
          src="https://akk.028wkf.cn/kdb-weapp-img/icon/xzlm.png"
          mode="aspectFill"
          class="select-icon"
        >
      </picker>
      <input
        v-model="shopAddress"
        class="input-block-plain"
        type="text"
        :placeholder="account.shopAddress"
        placeholder-class="placeholder-part"
      >
      <button class="btn-round-blue" @click="handleUpdateShopInfo">完成</button>
    </div>
  </div>
</template>

<script>
import {} from '@/utils'
import { UPDATE_SHOP_BASE_INFO } from '@/api'

export default {
  components: {},
  props: {},
  data () {
    return { addressList: [], shopAddress: '' }
  },
  computed: {
    account () {
      return this.$store.state.account
    },
    addressSelect () {
      if (this.addressList.length) {
        return Array.from(new Set(this.addressList)).join('')
      } else {
        return '选择省、市、区'
      }
    }
  },
  watch: {},
  created () {},
  mounted () {},
  onShow () {
    let { province, city, area } = this.account
    this.addressList = [province, city, area]
  },
  methods: {
    handleAddressChange (e) {
      let val = e.target.value
      this.addressList = val
    },
    handleUpdateShopInfo () {
      if (!this.addressList.length) {
        this.$toast('请选择省市区')
      } else if (!this.shopAddress) {
        this.$toast('请输入详细地址')
      } else {
        this.updateShopInfo()
      }
    },
    updateShopInfo () {
      const vm = this

      let [province, city, area] = vm.addressList

      let params = {
        shopId: vm.account.shopId,
        shopAddress: vm.shopAddress,
        province,
        city,
        area
      }

      UPDATE_SHOP_BASE_INFO(params)
        .then(r => {
          if (r.data.code === '0' && r.data.data) {
            vm.$toast('操作成功')
            vm.$store.commit('SET_ACCOUNT_INFO', {
              shopAddress: vm.shopAddress,
              province,
              city,
              area
            })
            vm.shopAddress = ''
            vm.$router.go(-1)
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
@import 'static/styles/color.scss';

.input-block-plain {
  height: 28.25px;
  line-height: 28.25px;
  position: relative;
  &:first-child {
    margin-bottom: 15px;
  }
  .placeholder {
    color: $gray;
    &.hasVal {
      color: $black;
    }
  }
  .select-icon {
    position: absolute;
    width: 8px;
    height: 16px;
    top: 50%;
    right: 15px;
    transform: translateY(-50%) rotate(90deg);
  }
}
</style>